<template>
    <div>
       <el-row type="flex" justify="center"  align="middle" style="margin-top:5.125rem;">
       				<el-col :span="10">
       					<el-card style="background-color: #FFFFFF"  v-loading="loading">
       						
       						<el-form :model="proForm" ref="proForm" :rules="rules"  label-position="left" style="font-weight: 700;">
       							<el-form-item prop="name" label="项目名称" style="margin-top: 0.625rem;">
       								<!-- <div > -->
       									<el-input v-model="proForm.name" style="margin-left: 5%; margin-right: 20%;width: 60%;"></el-input>
       								<!-- </div> -->
       							</el-form-item>
       							<el-form-item prop="detail" label="项目简介">
       								<!-- <div > -->
       									<el-input type="textarea" maxlength="200"  show-word-limit rows="5" v-model="proForm.detail" style="margin-left: 5%;  margin-right: 20%;width: 60%;"></el-input>
       								<!-- </div> -->
       							</el-form-item>
       							<el-form-item prop="teacher" label="指导老师">
       								<!-- <div > -->
       									<el-input v-model="proForm.teacher" style=" margin-left: 5%; margin-right: 20%;width: 60%;"></el-input>
       								<!-- </div> -->
       							</el-form-item>
       							<el-form-item prop="type1" label="项目类型">
       								<!-- <div > -->
       									 <el-radio-group v-model="proForm.type1" style=" margin-left: 5%; margin-right: 10%;width: 80%;">
       									      <el-radio label="互联网+"  @change="other=false"></el-radio>
       									      <el-radio label="大创"  @change="other=false"></el-radio>
       										  <el-radio label="挑战杯"  @change="other=false"></el-radio>
       										  <el-radio label="其他" @change="other=true"></el-radio>
       									    </el-radio-group>
       								<!-- </div> -->
       							</el-form-item>
       							<el-form-item prop="id" label="项目类型" v-if="other">
       								<!-- <div > -->
       									<el-input v-model="proForm.type2" style="margin-left: 5%;  margin-right: 20%;width: 60%;"></el-input> 
       								<!-- </div> -->
       							</el-form-item>
       							<el-form-item prop="userNum" label="成员数量">
       								<!-- <div > -->
       									<el-input v-model="proForm.userNum" style="margin-left: 5%;  margin-right: 20%;width: 60%;"></el-input>
       								<!-- </div> -->
       							</el-form-item>
       							
       							<el-form-item>
       								<el-button  style="width: 20%;" @click="reCreate">取消</el-button>
       								<el-button  style="width: 20%;" type="success" @click="create('proForm')">保存</el-button>
       							</el-form-item>
       						</el-form>
       					</el-card>
       				</el-col>
       				
       			</el-row >
        
    </div>
</template>

<script>
	
	
export default {
	
    props:{
    	 proForm:{
    	        type:Object 
    	    },
    },
   
    data:function () {
		
        var checkNum = (rule, value, callback) => {
        	// 
        	if (!value) {
        	  return callback(new Error('人数不能为空'));
        	}else if(Number.isNaN(Number(value))){
        		return callback(new Error('必须为数字'));
        	}if(1>value || 20<value){
        		return callback(new Error('必须在1-20'));
        	}if(!Number.isInteger(Number(value))){
        		return callback(new Error('必须为整数'));
        	}else{
        		callback();
        		}
        };
		
		return{
			loading:false,
			rules:{
				name: [
						{ required: true, message: '请输入项目名称', trigger: 'blur' },
						{ min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
					  ],
				detail: [
						{ required: true, message: '请输入项目简介', trigger: 'blur' },
						{ min: 10, max: 200, message: '长度在 10 到 200 个字符', trigger: 'blur' }
					],
				userNum: [
						{required: true,  trigger: 'blur' },
						{ validator: checkNum}
					  ],
				teacher: [
						{ required: true, message: '请输入指导老师名称（多个逗号隔开）', trigger: 'blur' },
						{ min: 2, max: 30, message: '长度在 2 到 20 个字符', trigger: 'blur' }
					  ],
				type1: [
						{ required: true, message: '请输入项目类型', trigger: 'blur' },
						{ min: 2, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
					  ],
			},
			}
	},
    
    
    methods:{
		reCreate:function(){
			this.$emit('reCreate',false)
		},
		create: async function(formName){
			await this.$refs[formName].validate(async (valid) => {
				  if (valid) {
					  this.$confirm('确认创建？', '确认信息', {
					  	distinguishCancelAndClose: true,
					  	confirmButtonText: '确认',
					  	cancelButtonText: '取消'
					  })
					  .then(async () => {
						  this.loading = true;
							if(this.proForm.typ1 === '其他'){
								this.proForm.typ1 = this.proForm.typ2
							}
							let postData = {
								"name":this.proForm.name,
								"introduce":this.proForm.detail,
								"instructor":this.proForm.teacher,
								"type":this.proForm.type1,
								"userNum":this.proForm.userNum,
							}
							let res = await this.text(this.$api.createProject,postData,"post")
							
							if (res.code === 200) {
								this.$message({
									message: '创建成功',
									type: 'success'
									});
								location.reload();
								
							}else{
									this.$message.error('请求失败或者接口返回失败');
							} 
							this.loading = false;
						})
					
				  } else {
					this.$message.error('请输入数据');
					return false;
				  }
			})
		},
		
            
        
    }
}
</script>

<style scoped>
  @import url("../assets/style/pro.css");
</style>